{%- stylesheet -%}
.block_featured_reviews {
  padding-bottom: 60px;
  background-color: var(--bg-color);
  overflow: hidden;
}
.block_featured_reviews .block_title h2 {
  color: var(--title-color);
}
.block_featured_reviews .block_title .block_detail {
  color: var(--detail-color);
}
.block_featured_reviews .container_wrapper {
  max-width: min(var(--general_layout_width), 808px);
}
@media screen and (min-width: 900px) {
  .block_featured_reviews .container_wrapper {
    box-sizing: content-box;
  }
}
@media screen and (min-width: 1400px) {
  .block_featured_reviews {
    padding-bottom: 100px;
  }
}
.block_featured_reviews .content {
  position: relative;
}
.block_featured_reviews .content > .swiper {
  position: relative;
  overflow: visible !important;
}
.block_featured_reviews .color-opacity {
  color: #888888;
}
.block_featured_reviews .text-ellipsis5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
}
.block_featured_reviews .swiper-creative .wrap-slide {
  overflow: visible;
}
.block_featured_reviews img {
  width: 100%;
  object-fit: cover;
}
.block_featured_reviews .wrap-slide .slide_content {
  height: 450px;
  background-color: #FFFFFF;
  box-shadow: 0px 15px 60px 1px rgba(0, 0, 0, 0.07);
  border-radius: 5px;
  display: grid;
  grid-template-columns: 320px auto;
  gap: 30px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .block_featured_reviews .wrap-slide .slide_content {
    display: block;
  }
}
.block_featured_reviews .wrap-slide .slide_content .left_box {
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .block_featured_reviews .wrap-slide .slide_content .left_box {
    display: none;
  }
}
.block_featured_reviews .wrap-slide .slide_content .left_box .no_img_box .top img {
  height: 376px;
  width: 100%;
  object-fit: cover;
}
.block_featured_reviews .wrap-slide .slide_content .left_box .no_img_box .bottom {
  display: flex;
  gap: 10px;
  margin: 10px 10px 11px 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.block_featured_reviews .wrap-slide .slide_content .left_box .no_img_box .bottom > div {
  height: 52px;
  width: 52px;
}
.block_featured_reviews .wrap-slide .slide_content .right_box {
  padding: 30px 30px 30px 0;
  overflow-y: auto;
}
@media screen and (max-width: 767px) {
  .block_featured_reviews .wrap-slide .slide_content .right_box {
    padding: 20px;
  }
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_time_wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_time_wrap .flag_img {
  display: flex;
  width: 20px;
  flex-shrink: 0;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_time_wrap .flag_img img {
  width: 100%;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_time_wrap .comment_name {
  font-weight: bold;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_time_wrap .comment_time {
  white-space: nowrap;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_star_wrap {
  margin-top: 11px;
  margin-bottom: 10px;
  font-size: 0;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_star_wrap svg {
  width: 18px;
  height: 18px;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_content {
  padding-bottom: 23px;
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .block_featured_reviews .wrap-slide .slide_content .right_box .comment_content {
    border-bottom: 1px solid;
    border-image: repeating-linear-gradient(90deg, #dddddd 0, #dddddd 5px, transparent 5px, transparent 10px) 20;
  }
}
@media screen and (max-width: 767px) {
  .block_featured_reviews .wrap-slide .slide_content .right_box .comment_content {
    padding-bottom: 10px;
  }
}
.block_featured_reviews .wrap-slide .slide_content .right_box .mobile_imgs {
  display: none;
  padding-bottom: 20px;
  border-bottom: 1px solid;
  border-image: repeating-linear-gradient(90deg, #dddddd 0, #dddddd 5px, transparent 5px, transparent 10px) 20;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .mobile_imgs:empty {
  padding-bottom: 0;
}
@media screen and (max-width: 767px) {
  .block_featured_reviews .wrap-slide .slide_content .right_box .mobile_imgs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
}
.block_featured_reviews .wrap-slide .slide_content .right_box .mobile_imgs img {
  width: 54px;
  height: 54px;
  object-fit: cover;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .reply_box_wrap {
  margin-top: 20px;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .reply_box_wrap .reply_time_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .reply_box_wrap .reply_time_wrap .reply_name {
  font-weight: bold;
  color: #1d1f21;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .reply_box_wrap .reply_content {
  margin-top: 10px;
  font-size: 14px;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap {
  margin-top: 10px;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap .comment_product {
  background-color: #f6f6f6;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap .comment_product a {
  line-height: 1;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap .comment_product a .product_img {
  height: 80px;
  width: 80px;
  flex-shrink: 0;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap .comment_product a .product_img img {
  height: 100%;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap .comment_product a .right {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap .comment_product a .right .product_title {
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap .comment_product a .right .price {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap .comment_product a .right .price .general-price {
  font-size: 16px;
  color: var(--buying_parice_color);
}
.block_featured_reviews .wrap-slide .slide_content .right_box .comment_product_wrap .comment_product a .right .price .general-oldprice {
  font-size: 14px;
  color: var(--original_price_color);
  text-decoration: line-through;
}
.block_featured_reviews .swiper_nav_wrap {
  position: absolute;
  width: calc(100% + 150px);
  display: flex;
  justify-content: space-between;
  left: -75px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 120;
}
.block_featured_reviews .swiper_nav_wrap.show_bottom {
  margin-top: 60px;
  display: flex;
  gap: 20px;
  justify-content: center;
  position: relative;
  top: auto;
  transform: none;
}
.block_featured_reviews .swiper_nav_wrap .button-prev,
.block_featured_reviews .swiper_nav_wrap .button-next {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  box-shadow: 0px 3px 15px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: none;
  cursor: pointer;
  outline: none;
  pointer-events: all;
  background-color: #ffffff;
}
.block_featured_reviews .swiper_nav_wrap .button-prev svg,
.block_featured_reviews .swiper_nav_wrap .button-next svg {
  width: 22px;
  outline: none;
}
.block_featured_reviews .swiper_nav_wrap .swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
.block_featured_reviews .swiper_nav_wrap .button-next svg {
  transform: rotate(180deg);
}

.block_featured_reviews  .video-icon{
    position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: none;
}
{%- endstylesheet -%}

{% assign data = section.settings %}

{% assign blockId = block_id | default: section.block_id %}
{% assign choice_comments_size = 0 %}

{% assign score_uncheck_color = theme_config.global.product_score_uncheck_color | default: '#bbbbbb' %}
{% assign score_selected_color = theme_config.global.product_score_selected_color | default: '#F8AD6B' %}

<div class="block_featured_reviews" id="block_featured_reviews-{{ blockId }}" style="--bg-color: {{ data.bg_color }};--title-color: {{ data.title_color }};--detail-color: {{ data.detail_color }};">
  <div class="container_wrapper">
    <div class="content">
      {% include 'block_title', title: data.block_title, detail: data.block_detail %}
      <div class="swiper" id="swiper-{{ blockId }}">
        <ul class="swiper-wrapper">
          {% if section.blocks.size > 0 %}
            {% assign ids = section.blocks | get_array_values: 'comment' | get_array_values: 'id' | join: ',' %}
            {% get_choiceness_comments ids={ids} %}
            {% assign choice_comments_size = choice_comments.size %}
            {% for item in choice_comments %}
              <li class="swiper-slide wrap-slide">
                <div class="slide_content">
                  <div class="left_box">
                    {% if item.images.src.size > 0 %}
                      {% assign id = blockId | append: forloop.index0 %}
                      
                      {% include 'comment_img_preview', previewImage: item.images.src, blockId: id, showSmall: true %}
                      {% else %}
                      <div class="no_img_box">
                        <div class="top">
                          {% include 'lazy_img' %}
                        </div>
                        <div class="bottom">
                          {% for i in (1..5) %}
                            <div>
                              {% include 'lazy_img' %}
                            </div>
                          {% endfor %}
                        </div>
                      </div>
                    {% endif %}
                  </div>
                  <div class="right_box">
                    <div class="comment_time_wrap">
                      <div class="flag_img">
                        <img src="{{ item.national_flag }}" />
                      </div>
                      <div class="comment_name text-ellipsis">{{ item.customer_name }}</div>
                      {% if storeConfig.hide_time == '0' %}
                      <div class="comment_time color-opacity">
                        <span class="format-date" data-date="{{ item.created_at }}" data-format="YYYY-mm-dd">
                          {{- item.created_at | date: '%Y-%m-%d' -}}
                        </span>
                      </div>
                      {% endif %}
                    </div>
                    <div class="comment_star_wrap">
                      {% for index in (1..5) %}
                        {% if index <= item.star %}
                          {% include 'icon_block_star', width: '16', height: '16', color: score_selected_color %}
                        {% else %}
                          {% include 'icon_block_star', width: '16', height: '16', color: score_uncheck_color %}
                        {% endif %}
                      {% endfor %}
                    </div>
                    {% if item.comment_title and storeConfig.comments_title_require != '0' %}
                    <div class="comment_content color-opacity" style="    border: none;    padding-bottom: 5px;">
                      <div class="text-ellipsis5" style="font-weight: bold; color: #333;">
                        {{ item.comment_title }}
                      </div>
                    </div>
                    {% endif %}

                    <div class="comment_content color-opacity">
                      <div class="text-ellipsis5">
                        {{ item.content }}
                      </div>
                    </div>
                    <div class="mobile_imgs">
                      {%- if item.images.src.size > 0 -%}
                        {%- for i in item.images.src -%}
                          {%- assign params = i |public_front_asset_url|parseUrlParams: 'array' -%}
                          {%- if params.video  -%}
                            <div  style="position: relative;" data-index="{{ forloop.index0 }}">
                            {%- include 'default_icon', icon:"video", height:"20", width:"20" -%}
                            {% include 'lazy_img', src: i %} 
                            </div>
                            {%- else -%}
                            <div data-index="{{ forloop.index0 }}">
                               {% include 'lazy_img', src: i %}
                            </div>
                       
                              
                          {%- endif -%}
                        {%- endfor -%}
                      {%- endif -%}
                    </div>
                    {% if item.reply_content != '' %}
                    <div class="reply_box_wrap">
                      <div class="reply_time_wrap">
                        <div class="reply_name">{{ lang.comments.reply }}:</div>
                        {% if  storeConfig.hide_time != '1' %}
                        <div class="reply_time color-opacity">
                          <span class="format-date" data-date="{{ item.replied_at }}" data-format="YYYY-mm-dd">
                            {{- item.replied_at | date: '%Y-%m-%d' -}}
                          </span>
                        </div>
                        {% endif %}

                      </div>
                      <div class="reply_content color-opacity">
                        <div class="text-ellipsis2">
                          {{ item.reply_content }}
                        </div>
                      </div>
                    </div>
                    {% else %}
                      <div style="padding-bottom: 14px;"></div>
                    {% endif %}
                    <div class="comment_product_wrap">
                      {% get_product product_id={item.product_id} %}
                      {%- if product.images[1].alt == '' -%}
                        {% assign product_alt2 = product | image_alt: 'product' %}
                      {%- else -%}
                        {% assign product_alt2 = product.images[1].alt %}
                      {%- endif -%}
                      {%- capture product_url -%}
                        /products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
                      {%- endcapture -%}
                      <div class="comment_product">
                        <a href="{{ product_url }}">
                          <div class="product_img">
                            {% include 'lazy_img',class: 'default_img',src: product.src,alt: product_alt,class: 'w-full h-full object-cover' %}
                          </div>
                          <div class="right">
                            <h3 class="product_title text-ellipsis">
                              {{ product.title }}
                            </h3>
                            <div class="price">
                              {% if product.variant.price < 0 %}
                                <span class="general-price">{{ '88.88' | money }}</span>
                              {% else %}
                                <span class="general-price">{{ product.variant.price | money }}</span>
                              {% endif %}
                              {% if product.variant.compare_at_price != '0' and product.variant.price < product.variant.compare_at_price %}
                                <span class="general-oldprice">
                                  {{- product.variant.compare_at_price | default: '88.88' | money -}}
                                </span>
                              {% endif %}
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            {% endfor %}
            {% unless choice_comments.size %}
              <li class="swiper-slide wrap-slide">
                <div class="slide_content">
                  <div class="left_box">
                    <div class="no_img_box">
                      <div class="top">
                        {% include 'lazy_img' %}
                      </div>
                      <div class="bottom">
                        {% for i in (1..5) %}
                          <div>
                            {% include 'lazy_img' %}
                          </div>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                  <div class="right_box">
                    <div class="comment_time_wrap">
                      <div class="flag_img">
                        <img src="/statics/country/flag/ca.png" />
                      </div>
                      <div class="comment_name text-ellipsis">Gi***gi</div>
                      {% if storeConfig.hide_time == '0' %}
                      <div class="comment_time color-opacity">
                        <span class="format-date" data-date="{{ item.created_at }}" data-format="YYYY-mm-dd">
                          2021-10-11
                        </span>
                      </div>
                      {% endif %}
                    </div>
                    <div class="comment_star_wrap">
                      {% for index in (1..5) %}
                        {% if index <= 5 %}
                          {% include 'icon_block_star', width: '16', height: '16', color: score_selected_color %}
                        {% else %}
                          {% include 'icon_block_star', width: '16', height: '16', color: score_uncheck_color %}
                        {% endif %}
                      {% endfor %}
                    </div>
                    <div class="comment_content color-opacity">
                      <div class="text-ellipsis5">
                        So far, so good. Been working on collecting manual review and setting things 
                        up while we move a site to Shopify. Yopto Support team is very responsive and 
                        helpful. I've chatted with Orly a few times as well as a few others.sive and 
                        helpful. I've chatted with Orly a few times as well as a few others.
                      </div>
                    </div>
                    <div class="mobile_imgs"></div>
                    {% if item.reply_content != '' %}
                    <div class="reply_box_wrap">
                      <div class="reply_time_wrap">
                        <div class="reply_name">{{ lang.comments.reply }}:</div>
                        <div class="reply_time color-opacity">
                          <span class="format-date" data-date="{{ item.replied_at }}" data-format="YYYY-mm-dd">
                            2021-10-11
                          </span>
                        </div>
                      </div>
                      <div class="reply_content color-opacity">
                        <div class="text-ellipsis5">
                          Thanks for your device!
                        </div>
                      </div>
                    </div>
                    {% endif %}
                    <div class="comment_product_wrap">
                      <div class="comment_product">
                        <a href="javascript:;">
                          <div class="product_img">
                            {% include 'lazy_img',class: 'default_img',src: '',alt: '',class: 'w-full h-full object-cover' %}
                          </div>
                          <div class="right">
                            <div class="product_title text-ellipsis2">
                              Consectetur Hampden Con
                            </div>
                            <div class="price">
                              <span class="general-price">{{ '100' | money }}</span>
                              <span class="general-oldprice">
                                {{- '300' | money -}}
                              </span>
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            {% endunless %}
            {% else %}
              <li class="swiper-slide wrap-slide">
                <div class="slide_content">
                  <div class="left_box">
                    <div class="no_img_box">
                      <div class="top">
                        {% include 'lazy_img' %}
                      </div>
                      <div class="bottom">
                        {% for i in (1..5) %}
                          <div>
                            {% include 'lazy_img' %}
                          </div>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                  <div class="right_box">
                    <div class="comment_time_wrap">
                      <div class="flag_img">
                        <img src="https://cn01-cdn.staticsyy.com/statics/country/flag/ca.png" />
                      </div>
                      <div class="comment_name text-ellipsis">Gi***gi</div>
                      {% if storeConfig.hide_time == '0' %}
                      <div class="comment_time color-opacity">
                        <span class="format-date" data-date="{{ item.created_at }}" data-format="YYYY-mm-dd">
                          2021-10-11
                        </span>
                      </div>
                      {% endif %}
                    </div>
                    <div class="comment_star_wrap">
                      {% for index in (1..5) %}
                        {% if index <= 5 %}
                          {% include 'icon_block_star', width: '16', height: '16', color: score_selected_color %}
                        {% else %}
                          {% include 'icon_block_star', width: '16', height: '16', color: score_uncheck_color %}
                        {% endif %}
                      {% endfor %}
                    </div>
                    <div class="comment_content color-opacity">
                      <div class="text-ellipsis5">
                        So far, so good. Been working on collecting manual review and setting things 
                        up while we move a site to Shopify. Yopto Support team is very responsive and 
                        helpful. I've chatted with Orly a few times as well as a few others.sive and 
                        helpful. I've chatted with Orly a few times as well as a few others.
                      </div>
                    </div>
                    <div class="mobile_imgs"></div>
                    {% if item.reply_content != '' %}
                    <div class="reply_box_wrap">
                      <div class="reply_time_wrap">
                        <div class="reply_name">{{ lang.comments.reply }}:</div>
                        <div class="reply_time color-opacity">
                          <span class="format-date" data-date="{{ item.replied_at }}" data-format="YYYY-mm-dd">
                            2021-10-11
                          </span>
                        </div>
                      </div>
                      <div class="reply_content color-opacity">
                        <div class="text-ellipsis5">
                          Thanks for your device!
                        </div>
                      </div>
                    </div>
                    {% endif %}
                    <div class="comment_product_wrap">
                      <div class="comment_product">
                        <a href="javascript:;">
                          <div class="product_img">
                            {% include 'lazy_img',class: 'default_img',src: '',alt: '',class: 'w-full h-full object-cover' %}
                          </div>
                          <div class="right">
                            <div class="product_title text-ellipsis2">
                              Consectetur Hampden Con
                            </div>
                            <div class="price">
                              <span class="general-price">{{ '100' | money }}</span>
                              <span class="general-oldprice">
                                {{- '300' | money -}}
                              </span>
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
          {% endif %}
        </ul>

        {% if choice_comments_size > 1 %}
        <div class="swiper_nav_wrap">
          <div class="button-prev" id="button-prev-{{ blockId }}">
            <svg t="1715233228414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20277"><path d="M366.72 512l377.6-377.6a40.32 40.32 0 0 0 0-58.24 41.6 41.6 0 0 0-58.24 0L279.68 482.56a40.32 40.32 0 0 0 0 58.24l406.4 406.4a40.32 40.32 0 0 0 29.44 12.16 39.04 39.04 0 0 0 28.8-12.16 41.6 41.6 0 0 0 0-58.24z" fill="#445365" p-id="20278"></path></svg>
          </div>
          <div class="button-next" id="button-next-{{ blockId }}">
            <svg t="1715233228414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20277"><path d="M366.72 512l377.6-377.6a40.32 40.32 0 0 0 0-58.24 41.6 41.6 0 0 0-58.24 0L279.68 482.56a40.32 40.32 0 0 0 0 58.24l406.4 406.4a40.32 40.32 0 0 0 29.44 12.16 39.04 39.04 0 0 0 28.8-12.16 41.6 41.6 0 0 0 0-58.24z" fill="#445365" p-id="20278"></path></svg>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% if choice_comments_size > 0 %}
  <script>
    $(function () {

      let isMobile = moi.isMobile()
      let offsetY = isMobile ? 27 : 34
      let options = {}

      if(isMobile) {
        let boxsHeight = []
        $('#swiper-{{ blockId }} .slide_content .right_box').each((index,ele) => {
          boxsHeight.push(ele.clientHeight)
        })
        let maxVal = Math.max(...boxsHeight)
        $('#swiper-{{ blockId }} .slide_content').css('height',maxVal+'px')
      }

      if(!isMobile) {
        options.allowTouchMove = false
      }
      let showNumber = '{{ choice_comments_size }}' >= 3 ? 3 : Number('{{ choice_comments_size }}');
        $('#block_featured_reviews-{{ blockId }} video').each(function(){
            $(this).on('play', function(){
              $(this).closest('.swiper-slide').find('.video-icon').hide()
            })
            $(this).on('pause', function(){
              $(this).closest('.swiper-slide').find('.video-icon').show()
            })
        })
      moi.loadSwiper(8, function() {
        let swiper = new Swiper8('#swiper-{{ blockId }}', {
          watchSlidesProgress: true, 
          resistanceRatio: 0, 
          ...options,
          loop: true,
          loopedSlides: Number('{{ choice_comments_size }}') + 2,
          effect: 'creative',
          navigation: {
            nextEl: '#button-next-{{ blockId }}',
            prevEl: '#button-prev-{{ blockId }}',
          },
          on: {
            init: function() {
              let slides = this.slides;
              slides.forEach(item => {
                if($(item).find('.small_img_swiper').length == 0) return;
                let smallSlide = $(item).find('.small_img_swiper .swiper .swiper-slide')
                let next = $(item).find('.small_img_swiper .navigation_next')
                let prev = $(item).find('.small_img_swiper .navigation_prev')
  
                var bigImgSwiper = new Swiper($(item).find('.big_img_swiper .swiper'),{
                  on: {
                    slideChange: function(){
                      smallImgSwiper.slideTo(this.activeIndex)
                      smallSlide.removeClass('active')
                      smallSlide.eq(this.activeIndex).addClass('active')
                    
                      $('#block_featured_reviews-{{ blockId }}').find('video').each(function(){
                       try{
                        this.pause()
                       }catch(e){}
                      })
                    },
                  }
                })
  
                {% comment %} if($(item).find('.small_img_swiper').width() - 50 < smallSlide.length * (smallSlide.innerWidth() + 10)) {
                  next.css('display', 'inline-flex')
                  prev.css('display', 'inline-flex')
                } {% endcomment %}
  
                var smallImgSwiper = new Swiper($(item).find('.small_img_swiper .swiper'), {
                  slidesPerView : 5,
                  spaceBetween: 10,
                  navigation: {
                    nextEl: next,
                    prevEl: prev,
                  }
                })
                smallSlide.on('click', function() {
                  $(this).addClass('active').siblings().removeClass('active')
                  bigImgSwiper.slideTo($(this).index())
                })
              })
            },
            resize: function (swiper) {
              swiper.update();
            },
            setTranslate: function () {
              let slides = this.slides;
              
              for (i = 0; i < slides.length; i++) {
                var slide = slides.eq(i);
                var progress = slides[i].progress;
                let offsetX = this.width; 
    
                if (progress <= 0) {
                  var transform = `translate3d(${-i * offsetX}px,${Math.abs(progress) * offsetY}px,0) scale(${
                    1 - Math.abs(progress) / 20
                  })`;
                  slide.transform(transform);
                  slide.css({ opacity: progress + showNumber });
                }
  
                if (progress > 0) {
                  slide.css('opacity', 1 - progress);
                }
              }
            },
            setTransition: function (swiper, transition) {
              for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                slide.transition(transition);
              }
            },
            slideChange: function () {
              $('#block_featured_reviews-{{ blockId }}').find('video').each(function(){
                try{
                  this.pause()
                }catch(e){}
              })
            },
          },
          
        });
      })
      
  
      if(window.innerWidth < 1400) {
        $('#swiper-{{ blockId }} .swiper_nav_wrap').addClass('show_bottom');
      }

      if(isMobile) {
        $('#swiper-{{ blockId }} .mobile_imgs img').on('click', function() {
          let urls = []
          $(this).closest('.mobile_imgs').find('img').each((_,ele) => {
            {% comment %} urls.push($(ele).attr('src').split('?')[0]) {% endcomment %}
            urls.push($(ele).attr('src'))
          })
          moi.pictureImages(urls,$(this).closest('[data-index]').data('index'),$(this))
          
        })
      }
    });
  </script>
  {% endif %}
  
  {% schema %}
  {
    "class": "block_featured_reviews",
    "is_global": false,
    "icon": "icon-shaitupinglun",
    "name": {
      "zh_CN": "精选评论",
      "en": "Featured Reviews"
    },
    "max_blocks": 10,
    "blocks": [
      {
        "name": {
          "zh_CN": "精选评论",
          "en": "Featured Reviews"
        },
        "type": "item",
        "settings": [
          {
            "type": "card_comments",
            "label": {
              "zh_CN": "评论",
              "en_US": "Comments"
            },
            "default": {
              "id": "",
              "title": ""
            },
            "id": "comment"
          }
        ]
      }
    ],
    "settings": [
      {
        "type": "card_header",
        "label": {
          "zh_CN": "设置"
        }
      },
      {
        "type": "card_input",
        "label": {
          "zh_CN": "标题"
        },
        "default": "",
        "id": "block_title"
      },
      {
        "type": "card_text_editor",
        "label": {
          "zh_CN": "描述"
        },
        "id": "block_detail",
        "default": ""
      },
      {
        "type": "card_header",
        "id": "",
        "label": {
          "zh_CN": "颜色设置",
          "en_US": "Color Settings"
        }
      },
      {
        "type": "card_color",
        "id": "bg_color",
        "label": {
          "zh_CN": "背景颜色",
          "en_US": "Background Color"
        },
        "default": "#ffffff"
      },
      {
        "type": "card_color",
        "id": "title_color",
        "label": {
          "zh_CN": "标题颜色",
          "en_US": "Title Color"
        },
        "default": "#1D1F21"
      },
      {
        "type": "card_color",
        "id": "detail_color",
        "label": {
          "zh_CN": "描述颜色",
          "en_US": "Detail Color"
        },
        "default": "#666666"
      },
      {
        "type": "card_header",
        "label": {
          "zh_CN": "内容",
          "en_US": "content"
        }
      }
    ],
    "default": {
      "settings": {
        "block_title": "Featured Reviews",
        "block_detail": "Add customer reviews and testimonials to showcase your store’s happy customers.",
        "bg_color": "#ffffff",
        "title_color": "#1D1F21",
        "detail_color": "#666666"
      },
      "blocks": [
        {
          "comment": {
            "id": "",
            "title": ""
          },
          "block_type": "item"
        }
      ]
    }
  }
  {% endschema %}
  